<template>
  <div>
    <div @click="get">获取dom</div>
    <input type="file" @change="inputchange" action="http://47.114.35.79:10090/boshi/user/uploadFile" />
    <!-- <iframe src="https://v.qq.com/x/cover/2xslevs0grk9vy0.html" frameborder="0"></iframe> -->
    <el-input id="input" />
    上面是内容
    <div id="div1"></div>
  </div>
</template>

<script>
import E from 'wangeditor'
export default {
  data() {
    return {
      arr: [],
      base: null,
      editor: null,
    }
  },
  mounted() {
    let _this = this
    const { $, BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip } = E
    // 第一，菜单 class ，Button 菜单继承 BtnMenu class
    class AlertMenu extends BtnMenu {
      constructor(editor) {
        // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
        const $elem = E.$(
          `<div class="w-e-menu" data-title="上传图片" style="width:100px">
                <button>上传图片</button>
            </div>`
        )
        super($elem, editor)
      }
      // 菜单点击事件
      clickHandler() {
        // 做任何你想做的事情
        // 可参考【常用 API】文档，来操作编辑器
        console.log('点击菜单')
        // var newImg = document.createElement('img')
        // newImg.src = 'https://c-img.18183.com/images/2021/07/21/00fd7260b118ba5cfed0d4d730744e20.jpg@!18183'
        // console.log(newImg)
        // editor.selection.getSelectionContainerElem().elems[0].append(newImg)
        var newUpload = document.createElement('input')
        newUpload.type = 'file'
        newUpload.onchange = _this.change
        newUpload.click()
      }

      tryChangeActive() {
        this.active()
      }
    }
    const menuKey = 'alertMenuKey'
    E.registerMenu(menuKey, AlertMenu)

    let editor = new E('#div1')
    editor.create()
    this.editor = editor
  },
  methods: {
    change(e) {
      let _this = this
      let file = e.target.files[0]
      let reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = function (res) {
        var newImg = document.createElement('img')
        newImg.src = res.target.result
        _this.editor.selection.getSelectionContainerElem().elems[0].append(newImg)
      }
    },
    inputchange(e) {
      console.log(e.target.files[0], 111111111)
      let file = e.target.files[0]
      let reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = function (res) {
        let base = res.target.result
        console.log(base, 'base')
      }
    },
    get() {
      console.log(this.editor.txt.html())
    },
  },
}
</script>

<style lang="scss" scoped>
</style>